<template>
  <span 
    class="status-badge" 
    :class="[
      `status-${status}`,
      { 'with-animation': animated }
    ]"
    :title="getStatusDescription()"
  >
    <span class="status-indicator"></span>
    <span class="status-text">{{ text }}</span>
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  status: 'active' | 'inactive' | 'pending'
  text: string
  animated?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  animated: true
})

const getStatusDescription = (): string => {
  const descriptions = {
    active: '当前状态: 启用 - 组件正常运行中',
    inactive: '当前状态: 禁用 - 组件已被停用',
    pending: '当前状态: 开发中 - 组件正在开发或测试阶段'
  }
  return descriptions[props.status] || '未知状态'
}
</script>

<style scoped>
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: help;
  border: 1px solid transparent;
}

.status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-text {
  white-space: nowrap;
}

/* 启用状态 */
.status-active {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
  border-color: #10b981;
}

.status-active .status-indicator {
  background: #10b981;
}

.status-active.with-animation .status-indicator {
  animation: pulse-green 2s ease-in-out infinite;
}

/* 禁用状态 */
.status-inactive {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
  border-color: #ef4444;
}

.status-inactive .status-indicator {
  background: #ef4444;
}

/* 开发中状态 */
.status-pending {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: #f59e0b;
}

.status-pending .status-indicator {
  background: #f59e0b;
}

.status-pending.with-animation .status-indicator {
  animation: pulse-yellow 1.5s ease-in-out infinite;
}

/* 动画效果 */
@keyframes pulse-green {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes pulse-yellow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.3);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .status-badge {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  
  .status-indicator {
    width: 5px;
    height: 5px;
  }
}
</style>
